// 当页面内的元素都加载完了，再为他们添加特效
window.addEventListener("load", function () {
    // 轮播图的父盒子
    let slideshow = document.querySelector(".slideshow");
    // 轮播图的图片列表
    let slideshowList = document.querySelector(".slideshow-list");
    // 轮播图的小圆点列表
    let circleList = document.querySelector(".circle-list");
    // 轮播图左箭头
    let arrowL = document.querySelector(".arrow-l");
    // 轮播图右箭头
    let arrowR = document.querySelector(".arrow-r");

    // 轮播图图片数
    let imgNum = slideshowList.children.length;
    // 轮播图图片宽度
    let imgWidth = slideshow.clientWidth;
    // 跟踪轮播图索引，防止轮播图越界
    let num = 0;
    // 控制小圆点随着轮播图变化
    let circle = 0;

    // 设置轮播图列表的宽度
    slideshowList.style.width = (imgNum + 1) * 100 + "%";

    // 清除 obj 以外的元素的颜色。只改变 obj 的颜色
    function circleColor(obj) {
        // 清空当前小圆点以外的小圆点的颜色
        for (let i = 0; i < imgNum; i++) {
            circleList.children[i].style.backgroundColor = "white";
        }
        // 将当前小圆点的颜色改为橙色
        obj.style.backgroundColor = "orangered";
    }

    // 根据实际轮播图个数，动态的插入小圆点
    for (let i = 0; i < imgNum; i++) {
        // 创建一个li元素
        let li = document.createElement("li");
        // 通过自定义属性记住小圆圈的索引号
        li.setAttribute("index", i);
        // 将元素添加进列表中
        circleList.appendChild(li);

        // 为每一个li注册事件
        li.addEventListener("click", function () {
            // 改变当前小圆点的颜色
            circleColor(this);

            // 获得小圆点的索引号
            let index = this.getAttribute("index");
            num = index;
            circle = index;
            // 滚动轮播图
            slowAnimate(slideshowList, -index * imgWidth, null);
        });
    }
    // 将第一个小圆点标记为橙色
    circleList.children[0].style.backgroundColor = "orangered";
    // 克隆一个第一副图到最后一位
    slideshowList.appendChild(slideshowList.children[0].cloneNode(true));

    // 节流阀，用来防止左右按钮点击过快，导致图片轮转过快
    let flag = true;
    // 给左右按钮注册事件
    arrowL.addEventListener("click", function () {
        if (flag === true) {
            // 防止其他点击进入该if代码块
            flag = false;

            if (num > 0) {
                num--;
                // 小圆点跟踪轮播图下标
                circle--;
            } else {
                // 将轮播图定位到第一章图片的副本，用来跳转到最后一张图片
                slideshowList.style.left = -imgNum * imgWidth + "px";

                // 将两个控制变量定位到最后一张图片，用来跳转到前一张图片
                num = imgNum - 1;
                circle = imgNum - 1;
            }

            // 滚动轮播图
            slowAnimate(slideshowList, -num * imgWidth, function () {
                // 当一张图片播放完时，打开节流阀，允许其他点击进入该if代码块
                flag = true;
            });
            // 改变当前小圆点的颜色
            circleColor(circleList.children[circle]);
        }


    });

    // 给左右按钮注册事件
    arrowR.addEventListener("click", function () {
        // 只有当一张图片不播放完时，才允许下一张图片播放
        if (flag === true) {
            // 防止其他点击进入该if代码块
            flag = false;

            if (num < imgNum) {
                num++;
                // 小圆点跟踪轮播图下标
                circle++;
            } else {
                // 如果到了最后一张就跳回第一张
                slideshowList.style.left = 0 + 'px';

                // 再将两个控制变量设置为 1，用来跳转到后一张图片
                num = 1;
                circle = 1;
            }

            // 移动轮播图
            slowAnimate(slideshowList, -num * imgWidth, function () {
                // 当一张图片播放完时，打开节流阀，允许其他点击进入该if代码块
                flag = true;
            });

            if (num === imgNum) {
                // 改变第一个小圆点的颜色
                circleColor(circleList.children[0]);
            } else {
                // 改变当前小圆点的图片
                circleColor(circleList.children[circle]);
            }
        }
    });


    // 轮播图自动播放定时器
    let timer = null;
    // 当鼠标经过轮播图时，清除定时器，取消轮播图的自动播放
    slideshow.addEventListener("mouseenter", function () {
        clearInterval(timer);
        timer = null;
    });

    // 当鼠标离开轮播图时，重新加载定时器，打开轮播图自动播放功能
    slideshow.addEventListener("mouseleave", function () {
        timer = setInterval(function () {
            arrowR.click();
        }, 2000);
    });

    // 注册定时器，实现轮播图自动播放
    timer = setInterval(function () {
        arrowR.click();
    }, 2000);
});